import React, { Component } from 'react';
// 导入封装的方法（分类搜索）
import { getList } from '../../api/index'

import { NavBar,SearchBar } from 'antd-mobile';
import '../../styles/allShop.css'

class Allshop extends Component {
    constructor(props) {
        super(props);
        this.state = {
            all_list :[]
        }
    }
    componentDidMount() {
        const shopId = this.props.location.state.id
        // 渲染分类
        getList({id:shopId}).then(res=>{
            console.log(res.data.list);
            this.setState({all_list:res.data.list})
        })
    }
    back() {
        this.props.history.go(-1)
    }
    goProduct(index) {
        const shopid = this.state.all_list[index].id
        this.props.history.push({pathname:'/product',state:{id:shopid}})
        // console.log(shopid);
    }
    render() {
        console.log(this.props.location.state.id);
        return (
            <div className='allshop'>
               <NavBar onBack={()=>{this.back()}}>全部商品</NavBar>
               <SearchBar placeholder='请输入内容' showCancelButton={() => true} />
               <div className='class_box'>
                    <div>综合</div>
                    <div>销量</div>
                    <div>新品</div>
                    <div>价格</div>
                    <div>筛选</div>
               </div>
                <div className='allshop_box'>
                    {
                        this.state.all_list.map((item,index)=>{
                            return (
                                <div className='shopbox1' key={index} onClick={()=>{this.goProduct(index)}}>
                                    <img src={item.pic} alt="" />
                                    <div>{item.name}</div>
                                    <div>原价￥<span>{item.salesPrice.value}</span></div>
                                    <div>活动价￥<span>{item.salesPrice.value}</span></div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Allshop;